<template>
  <view>
    <view class="title-msg row" style="justify-content: flex-start">
      <image :src="require('../static/gantanha.png')" style="width: 26rpx; height: 26rpx"></image>
      <text style="margin-left: 8rpx">该匹配产品仅做推荐参考，请结合实际情况选择适合产品</text>
    </view>
    <view class="card-box">
      <view class="card-t">
        <view class="campany-name">{{ campanyInfo.enterpriseName }}</view>
        <view class="time">
          <text></text>
          <text>报告生成时间：{{ campanyInfo.reportCreateTime || '-' }}</text>
        </view>
      </view>
      <view class="card-b">
        <view class="card-it">
          <view class="card-num">
            <text style="font-size: 60rpx">{{ campanyInfo.productNum > 20 ? 20 : campanyInfo.productNum }}</text>
            <text>款</text>
          </view>
          <view>准入产品</view>
        </view>

        <view class="card-it">
          <view class="card-num">
            <text style="font-size: 60rpx">{{ campanyInfo.totalQuota }}</text>
            <text>万</text>
          </view>
          <view>最高可贷</view>
        </view>
        <view class="card-type" :style="{ right: queryOptions.type == 1 ? '60rpx' : '30rpx' }">
          {{ queryOptions.type == 1 ? '企业' : '个体工商户' }}</view>
      </view>
    </view>

    <view class="line-box">
      <view class="line"></view>
      <view class="line-msg">企业分析详情</view>
      <view class="line"></view>
    </view>
    <view class="sticky-box">
      <view class="tab-box" ref="tabBox">
        <view class="tab-list">
          <view class="tab-item" @click="tabClick(index)" :class="current == index ? 'tab-item-ac' : ''"
            v-for="(item, index) in tabList" :key="index">
            {{ item }}
          </view>
        </view>
      </view>
    </view>

    <view v-if="isLogin">
      <view class="paddingL15" style="padding-bottom: 130rpx">
        <enterprise-msg v-if="current == 0" :reportDetail="basicInfo" :queryOptions="queryOptions"></enterprise-msg>
        <pay-taxes-msg v-if="current == 1 && queryOptions.type == 1" :queryOptions="queryOptions"></pay-taxes-msg>
        <invoice-msg v-if="current == 2 && queryOptions.type == 1" :queryOptions="queryOptions"></invoice-msg>
        <result :key="resultKey"
          v-if="current == 3 || current == 4 || current == 5 || (queryOptions.type == 2 && current == 1)" :mStep="mStep"
          :mId="campanyInfo.memberId" :queryOptions="queryOptions"></result>
      </view>

      <footerBox @editIsTaxMatch="editIsTaxMatch" :isTaxMatch="isTaxMatch" :queryOptions="queryOptions"
        :campanyInfo="campanyInfo"></footerBox>
    </view>
    <authorize @onLoadFun="onLoadFun" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
  </view>
</template>

<script>
import { getMatchStatisticsApi, getCorporateCreditDetailApi, getcmsMatchIndividualApi } from '@/api/product'
import Authorize from "@/components/Authorize.vue";
import footerBox from './components/footerBox.vue';
import { mapGetters } from "vuex";
import enterpriseMsg from './components/enterpriseMsg.vue';
import payTaxesMsg from './components/payTaxesMsg.vue';
import InvoiceMsg from './components/InvoiceMsg.vue';
import result from './components/result.vue';
export default {
  components: {
    enterpriseMsg,
    payTaxesMsg,
    InvoiceMsg,
    result,
    footerBox,
    Authorize
  },
  data() {
    return {
      popContent: '申请已提交成功，顺潇会在两个工作日内为您安排一对一的助融专家联系您，请留意接听电话！',
      popBefore: '你还未进行税票匹配，申请专家咨询之前完成税票匹配会给出更全面、更专业的分析建议！',
      tabList: [], //0 1 匹配结果 2 征信 3 专家
      current: 0,
      queryOptions: {},
      basicInfo: [],
      detail: [],
      campanyInfo: {},
      resultKey: 0,
      isTaxMatch: false, //未进行税务匹配
      userInfo: {},
      mStep: 0,
      isshow: false,
      isShowAuth: false,
      optionsType: 0,
    }
  },
  computed: mapGetters(["isLogin"]),






  // #ifdef MP-WEIXIN
  onShareAppMessage: function (res) {
    if (res.from === 'button') { }
    const stepMap = {
      0: 3,
      1: 3,
      2: 4,
      3: 5
    }
    return {
      title: '匹配结果',
      path: `/pagesProduct/matchResult/index?id=${encodeURIComponent(this.queryOptions.id)}&current=${this.queryOptions.type == 2 ? 1 : stepMap[this.queryOptions.matchStep]}&type=${this.queryOptions.type}&createTime=${this.queryOptions.createTime}`,
    }
  },
  // #endif


  async onLoad(options) {
    let id = decodeURIComponent(options.id)
    this.queryOptions = Object.assign({}, options, { id })
    this.optionsType = options.type;
    this.mStep = options.current;
    if (!this.isLogin) {
      this.isShowAuth = true
    } else {
      if (!options.id) return

      await this.getSummerInfo();


      if (options.type == 1) {
        //企业
        this.getBasicInfo();
      }
      if (options.type == 2) {
        //个体工商
        this.getcmsMatchIndividual();
      }
      if (options.current == 3 || options.current == 4 || options.current == 5 || options.current == 1) {
        this.current = options.current;
        this.resultKey++;
      }
    }

  },
  methods: {
    async onLoadFun() {
      this.isShowAuth = false
      await this.getSummerInfo();
      if (this.optionsType == 1) {
        //企业
        this.getBasicInfo();
      }
      if (this.optionsType == 2) {
        //个体工商
        this.getcmsMatchIndividual();
      }
      if (this.mStep == 3 || this.mStep == 4 || this.mStep == 5 || this.mStep == 1) {
        this.current = this.mStep;
        this.resultKey++;
      }
    },
    authColse() {
      // this.$util.Tips('必须登录哦')
    },
    editIsTaxMatch() {
      this.isTaxMatch = false;
    },
    getRandomNumber(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    getSummerInfo() {
      const maxRetries = 10;
      const retryDelay = this.getRandomNumber(1500, 2500);
      const fetchData = (attempt = 1) => {
        this.loading = true;
        console.log(this.queryOptions, 'queryOptions');
        let params = {
          id: decodeURIComponent(this.queryOptions.id),
          type: this.queryOptions.type
        };
        getMatchStatisticsApi(params)
          .then((res) => {
            if (res.data.matchStatus !== 1) {
              this.campanyInfo = res.data;
              this.queryOptions.matchStep = res.data.matchStep;
              if (res.data.matchStep == 0) {
                this.isTaxMatch = true;
              }
              this.loading = false;
              // 数据处理
              this.getBasic();
            } else {
              // 数据为空时重试
              if (attempt < maxRetries) {
                setTimeout(() => fetchData(attempt + 1), retryDelay);
              } else {
                this.loading = false;
              }
            }
          })
          .catch((error) => {
            uni.hideLoading();
            if (attempt < maxRetries) {
              console.log(
                `Attempt ${attempt} failed. Retrying in ${retryDelay / 1000} seconds...`);
              setTimeout(() => fetchData(attempt + 1), retryDelay);
            } else {
              console.error('Failed to retrieve data after maximum retries.');
            }
          });
      };

      fetchData();
    },
    async getBasic() {
      if (this.queryOptions.type == 1) {
        //企业
        this.getBasicInfo();
      }
      if (this.queryOptions.type == 2) {
        //个体工商
        this.getcmsMatchIndividual();
      }

      await this.getTabList();
      // this.$refs.tabBox.$el.scrollLeft = 600;
    },
    getTabList() {
      const baseTabs = this.queryOptions.type == 1 ? ['企业信息', '纳税信息', '开票信息'] : ['企业信息'];
      const matchStepTabs = {
        0: ['匹配结果'],
        1: ['匹配结果'],
        2: ['匹配结果', '征信匹配'],
        3: ['匹配结果', '征信匹配', '专家匹配']
      };

      this.tabList = [...baseTabs, ...(matchStepTabs[this.campanyInfo.matchStep] || [])];
    },
    tabClick(index) {
      this.current = index;
      this.mStep = index;
      if (index == 3 || index == 4 || index == 5) {
        this.resultKey++;
      }
      if (this.queryOptions.type == 2 && index > 0) {
        this.mStep = this.current + 2;
      }
    },

    getBasicInfo() {
      uni.showLoading();
      getCorporateCreditDetailApi({
        id: this.queryOptions.id
      })
        .then((res) => {
          this.basicInfo = res.data;
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    getcmsMatchIndividual() {
      this.loading = true;
      getcmsMatchIndividualApi({
        id: this.queryOptions.id
      })
        .then((res) => {
          this.detail = res.data;
          this.basicInfo = res.data;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #fff !important;
}

.consultContent {
  width: 620rpx;
  height: 400rpx;
  border-radius: 32rpx;
  position: relative;

  .popTitle {
    font-size: 36rpx;
    font-weight: 600;
    text-align: center;
    margin-top: 24rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #e6e6e6;
  }

  .popContent {
    margin-top: 40rpx;
    color: #999999;
    line-height: 48rpx;
  }

  .popBottom {
    margin-top: 30rpx;
    position: absolute;
    width: 60%;
    left: 50%;
    bottom: 80rpx;
    transform: translateX(-50%);

    view {
      width: 180rpx;
      //height: 40rpx;
      background: #2872fd;
      color: #ffffff;
      text-align: center;
      padding: 12rpx 24rpx;
      font-size: 32rpx;
      font-weight: bold;
      border-radius: 8rpx;
    }
  }
}

/deep/ .uni-popup .uni-popup__wrapper {
  border-radius: 32rpx;
}

.title-msg {
  text-align: center;
  color: #999;
  font-size: 26rpx;
  margin: 30rpx 30rpx 10rpx;
}

.card-box {
  height: 346rpx;
  margin: 0 30rpx 30rpx;
  border-radius: 20rpx;
  overflow: hidden;
  display: flex;
  padding: 40rpx;
  justify-content: space-between;
  flex-direction: column;
  position: relative;
  background-image: url('');
  // background-color: #2872fd;
  background-size: 100% 100%;

  .card-t {
    .campany-name {
      font-weight: 600;
      font-size: 36rpx;
      color: #ffffff;
      margin-top: 18rpx;
      //line-height: 24rpx;
    }

    .time {
      // margin-top: 10rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #ffffff;
    }
  }

  .card-b {
    display: flex;

    .card-it {
      color: #fff;
      margin-right: 50rpx;

      .card-num {

        // display: flex;
        // align-items: baseline;
        >text {
          &:nth-child(1) {
            font-size: 48rpx;
            font-weight: 600;
          }

          &:nth-child(2) {
            margin-left: 10rpx;
          }
        }
      }
    }
  }

  .card-type {
    position: absolute;
    top: 10rpx;
    right: 50rpx;
    color: #fff;
    font-size: 26rpx;
    font-weight: bolder;
  }

  // background: radial-gradient( NaN% 0% at 0% 0%, #0075F7 0%, #2872FD 100%);
}

.line-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 80rpx 30rpx 0;
  color: #999;
  font-size: 26rpx;

  .line {
    width: 25%;
    height: 1px;
    background-color: #999;
  }

  .line-msg {
    font-weight: 600;
    font-size: 34rpx;
    color: #333333;
    margin: 0 16rpx;
    line-height: 24rpx;
  }
}

.tab-box {
  overflow-x: scroll;

  &::-webkit-scrollbar {
    display: none;
  }
}

.tab-list {
  width: max-content;
  margin: 30rpx;
  white-space: nowrap;

  .tab-item {
    width: 158rpx;
    height: 58rpx;
    line-height: 58rpx;
    background: #f6f9f8;
    border-radius: 29rpx 29rpx 29rpx 29rpx;
    text-align: center;
    margin-right: 14rpx;
    display: inline-block;
    font-weight: 600;
  }

  .tab-item-ac {
    background: #eef5ff;
    color: #2872fd;
    border: 2rpx solid #2872fd;
    line-height: 56rpx;
  }
}

.sticky-box {
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  position: -webkit-sticky;
  /* #endif */
  position: sticky;
  /* #ifdef H5*/
  top: var(--window-top);
  /* #endif */
  // padding-top: 30rpx;
  z-index: 99;
  // flex-direction: row;
  // margin: 0px;
  background: #ffffff;
  // padding: 30rpx 0;
  margin-top: 10rpx;
}

.fixBottom {
  background: rgba(246, 249, 248, 1);
  width: 100vw;
  position: fixed;
  bottom: 0rpx;
  left: 50%;
  right: 30rpx;
  transform: translateX(-50%);
  z-index: 10;
}

.footer-btn {
  display: flex;
  justify-content: space-between;
  align-content: center;
  padding: 30rpx 0 44rpx;

  .left-btn {
    width: 330rpx;
    height: 88rpx;
    background: #ffe7d2;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    border: 1rpx solid #fa7700;
    color: #fa7700;
    font-size: 34rpx;
    text-align: center;
    line-height: 88rpx;
  }

  .report-btn {
    width: 250rpx;
    height: 88rpx;
    background: #fa7700;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    border: 1rpx solid #fa7700;
    color: #FFFFFF;
    font-size: 34rpx;
    text-align: center;
    line-height: 88rpx;

  }


  .report-btn-disable {
    background: #999 !important;
    border: none;

  }

  .right-btn {
    width: 250rpx;
    height: 88rpx;
    font-size: 34rpx;
    background: #2872fd;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    color: #fff;
    text-align: center;
    line-height: 88rpx;
  }
}

.dialogContent {
  width: 560rpx;
  height: 378rpx;
  //background-image: url("@/pageMakeReport/static/bg/lockDialog.png");
  background: #FFFFFF;
  background-size: 100%;
  padding-top: 32rpx;
  border-radius: 30rpx;

  .lockReport {
    color: #333333;
    font-size: 34rpx;
    font-weight: 600;
    text-align: center;
  }

  .lockReportText {
    padding-top: 70rpx;
    font-size: 30rpx;
    color: #333333;
    padding-bottom: 48rpx;
  }

  .lockBtn {
    width: 50%;
    height: 70rpx;
    text-align: center;
    line-height: 70rpx;
    background: #f6f9f8;
    border-radius: 6rpx;
    //border: 1rpx solid #ECD1A9;
    background: #f6f9f8;
    border: 2rpx solid #dfe0e0;
    color: #c7c7c7;
    font-size: 32rpx;
    font-weight: 500;
  }

  .lock {
    margin-left: 30rpx;
    background: #2872fd;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    color: #fff;
  }
}
</style>